<template>
  <div class="timetable-warp">
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 12px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户ID: " prop="age">
            <el-input v-model.number="form.user_id" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角色">
            <el-select v-model="form.role" placeholder="请选择" clearable>
              <el-option label="学生" value="student"></el-option>
              <el-option label="教师" value="teacher"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin-left: 14px;" @click="getUserList">搜索</el-button>
          <el-button style="margin-left: 14px;" @click="reset">重置</el-button>
          <el-button type="success" style="float: right" @click="updateUser('add')">注册用户</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="user_id" align="center" label="用户ID"></el-table-column>
      <el-table-column prop="user_name" align="center" label="用户姓名" width="180"></el-table-column>
      <el-table-column prop="user_sex" align="center" label="用户性别" width="180">
        <template slot-scope="scope">
          {{
            scope.row.user_sex == '0' ? '男' : '女'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="user_age" align="center" label="用户年龄"></el-table-column>
      <el-table-column prop="user_phone" align="center" label="用户手机号"></el-table-column>
      <el-table-column prop="dept_name" align="center" label="所属系别"></el-table-column>
      <el-table-column prop="role" align="center" label="用户角色">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.role === 'student' ? 'primary' : 'success'"
            disable-transitions
          >{{ scope.row.role === 'student' ? '学生' : '教师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="updateUser('edit', scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteUser(scope.row)" type="text" size="small" style="color: #f56c6c">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <updatePop ref="updatePop" @ok="getUserList" />
  </div>
</template>

<script>
import { UserList, deleteUser } from '@/api/user';
import updatePop from './components/updateUser-pop.vue';
export default {
  name: 'timetable',
  components: {
    updatePop
  },
  data() {
    return {
      form: {},
      tableData: []
    }
  },

  methods: {
    // 1. 获取用户列表
    getUserList() {
      UserList({ ...this.form }).then(res => {
        if (res.result) {
          this.tableData = res.data
        }
      })
    },

    // 2. 重置
    reset() {
      this.form = {};
      this.getUserList()
    },

    // 3. 注册/修改用户弹窗
    updateUser(type, record) {
      this.$refs.updatePop.openMask({ type, ...record })
    },

    // 4. 删除用户
    deleteUser(record) {
      deleteUser({ user_id: record.user_id }).then(res => {
        if (res.result) {
          this.$message.success(res.message);
          this.getUserList();
        } else {
          this.$message.error(res.message);
        }
      })
    }
  },

  mounted() {
    this.getUserList()
  }
}
</script>

<style lang="stylus" scoped>
.el-select {
  width 100%
}
</style>
